<template>
	<view class="page">
		<view class="teacher_box">
			<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			 @up="upCallback">
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_top">
						<view class="thumb">
							<image src="../../static/img/touxiang.jpg"></image>
						</view>
						<view class="teachInfo">
							<view class="name">李师傅</view>
							<view class="time">发布时间：2020-06-25</view>
						</view>
					</view>
					<view class="mechanism_main_item_bot">
						<view class="title">买菜做饭</view>
						<view class="desc">服务描述：<text>服务描述：</text></view>
						<view class="serTime">服务时间：<text>2020-07-05 11:00-12:00</text></view>
						<view class="money">服务预算：<text>面议</text></view>
						<view class="address">
							<view class="addressText"><uni-icons class="search_icon" type="location-filled" size="16" color="#B3B3B3"></uni-icons>新都-华城-二区16栋1单元1304…</view>
							<view class="distance">距离4.8km</view>
						</view>
					</view>
					<view class="orderBtn">立即接单</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_top">
						<view class="thumb">
							<image src="../../static/img/touxiang.jpg"></image>
						</view>
						<view class="teachInfo">
							<view class="name">李师傅</view>
							<view class="time">发布时间：2020-06-25</view>
						</view>
					</view>
					<view class="mechanism_main_item_bot">
						<view class="title">买菜做饭</view>
						<view class="desc">服务描述：<text>服务描述：</text></view>
						<view class="serTime">服务时间：<text>2020-07-05 11:00-12:00</text></view>
						<view class="money">服务预算：<text>面议</text></view>
						<view class="address">
							<view class="addressText"><uni-icons class="search_icon" type="location-filled" size="16" color="#B3B3B3"></uni-icons>新都-华城-二区16栋1单元1304…</view>
							<view class="distance">距离4.8km</view>
						</view>
					</view>
					<view class="orderBtn">立即接单</view>
				</view>
				<view class="mechanism_main_item" @click="handleDetail">
					<view class="mechanism_main_item_top">
						<view class="thumb">
							<image src="../../static/img/touxiang.jpg"></image>
						</view>
						<view class="teachInfo">
							<view class="name">李师傅</view>
							<view class="time">发布时间：2020-06-25</view>
						</view>
					</view>
					<view class="mechanism_main_item_bot">
						<view class="title">买菜做饭</view>
						<view class="desc">服务描述：<text>服务描述：</text></view>
						<view class="serTime">服务时间：<text>2020-07-05 11:00-12:00</text></view>
						<view class="money">服务预算：<text>面议</text></view>
						<view class="address">
							<view class="addressText"><uni-icons class="search_icon" type="location-filled" size="16" color="#B3B3B3"></uni-icons>新都-华城-二区16栋1单元1304…</view>
							<view class="distance">距离4.8km</view>
						</view>
					</view>
					<view class="orderBtn">立即接单</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>


<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {},
		data() {
			return {
				datalist: {},
				height: 0.6,
				title: '机构列表'
			};
		},
		onLoad() {},
		methods: {
			// 获取分类信息
			change(e) {
				console.log('----------change----------');
				console.log(e);
			},
			select(e) {
				console.log('----------select----------');
				console.log(e);
			},
			changeTopItem(e) {
				console.log(e)
				if (e.type === 0) {
					this.positionInfo()
				}
			},
			positionInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										console.log(e)
										this.$set(this.sigleItem, 'title', e.name ? e.name : e.address)
										this.$set(this.sigleItem, 'value', e.name ? e.name : e.address)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			handleDetail(e) {
				uni.navigateTo({
					url: '/pages/demandHall/demand_detail'
				})
			}
		}
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.teacher_search_box {
		box-sizing: border-box;
		display: flex;
		width: 656rpx;
		height: 52rpx;
		line-height: 52rpx;
		border: 2rpx #FC503E solid;
		margin-left: 52rpx;
		margin-top: 20rpx;
		border-radius: 38rpx;
		margin-bottom: 12rpx;

		.teacher_search {
			padding-left: 50rpx;
			width: 80%;
			font-size: 24rpx;
		}
	}


	.teacher_box {
		padding: 33rpx;
		.mechanism_main_item {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			margin-bottom: 33rpx;
			background-color: #ffffff;
			padding-bottom: 33rpx;
			border-bottom: 1px solid #E2E2E2;
			.mechanism_main_item_top {
				display: flex;
				margin-bottom: 33rpx;

				.thumb {
					flex: 0 0 100rpx;
					width: 100rpx;
					height: 100rpx;
					margin-right: 33rpx;
					overflow: hidden;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.teachInfo {
					flex: 1;
					padding-top: 14rpx;

					.name {
						margin-bottom: 17rpx;
						line-height: 100%;
						font-size: 32rpx;
						color: #565656;
					}

					.time {
						line-height: 100%;
						font-size: 26rpx;
						color: #B3B3B3;
					}
				}
			}

			.mechanism_main_item_bot {
				.title {
					margin-bottom: 17rpx;
					line-height: 100%;
					font-size: 32rpx;
					color: #565656;
				}
				.desc,
				.serTime,
				.money {
					margin-bottom: 17rpx;
					font-size: 26rpx;
					color: #B3B3B3;
					text {
						font-size: 26rpx;
						color: #565656;
					}
				}
				.address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #565656;
				}
			}
		}
	}
	.orderBtn {
		position: absolute;
		right: 0;
		top: 0;
		width:142rpx;
		height:50rpx;
		line-height: 50rpx;
		background:rgba(54,138,255,1);
		border-radius:25rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
	}
</style>
